<template>
	<div>
		<div class="security">
			<div class="security_top">
				<p style="display: inline-block">
					{{
						$t('personalCenter.baitedaAccountSecurityCenter', '统一用户账号')
					}}
				</p>
				<span class="bind" v-if="bindFlag && loaded">{{
					$t('personalCenter.bound', '已绑定')
				}}</span>
				<span class="Unbound" v-if="!bindFlag && loaded">{{
					$t('personalCenter.unbound', '未绑定')
				}}</span>
			</div>
			<div class="security_main">
				<!-- 已绑定 -->
				<div class="security_main_content" v-if="bindFlag">
					<div class="security_main_left" :class="{ border: !!threeImgSrc }">
						<div>
							<div>
								<span class="left">{{
									$t('personalCenter.userUnionID', '用户ID')
								}}</span>
								<span class="right">{{ userInfo.user_id }}</span>
							</div>
							<div v-if="pwdFlag">
								<span class="left">{{
									$t('personalCenter.password', '密码')
								}}</span>
								<span class="right_modify" @click="changePwd">{{
									$t('personalCenter.changePassword', '修改密码')
								}}</span>
								<!-- <i class="icon_edit"></i> -->
								<i
									class="low-code iconbianji6-Blue"
									style="cursor: pointer"
									@click="changePwd"
								></i>
							</div>
							<div class="password-tips" v-if="!pwdFlag">
								<span class="left">{{
									$t('personalCenter.password', '密码')
								}}</span>
								<span class="right_modify" @click="setPwd">{{
									$t('personalCenter.setPassword', '设置密码')
								}}</span>
								<div class="p-tooltip">
									<!-- <a-tooltip overlayClassName="nameTooltipClass" placement="top" :visible="setPwdVisible"> -->
									<a-tooltip
										overlayClassName="nameTooltipClass"
										placement="top"
									>
										<template #title>
											<span>{{
												$t('personalCenter.tips', '请点击这里，快速设置密码')
											}}</span>
										</template>
										<i
											class="low-code iconyyzy-shezhi"
											style="cursor: pointer"
											@click="setPwd"
										></i>
										<!-- <i class="icon_install"></i> -->
									</a-tooltip>
								</div>
							</div>
							<div>
								<span class="left">{{
									$t('personalCenter.cellPhoneNumber', '手机号')
								}}</span>
								<span class="right">{{ userInfo.phone }}</span>
								<span class="right_change" @click="changePhoneN">{{
									$t('personalCenter.changeCellPhone', '换绑手机号')
								}}</span>
							</div>
						</div>
					</div>

					<!-- <div class="security_main_right" v-if="!!threeImgSrc">
						<div>
							<span class="left">{{$t('personalCenter.ThirdPartyAccount','第三方账号')}}</span>
							<span class="right">
								<img :src="threeImgSrc" width="18" />
								<span style="margin-left: 10px">{{ threeName }}</span>
								<span class="bind">{{$t('personalCenter.bound','已绑定')}}</span>
							</span>
						</div>
					</div> -->
				</div>
				<!-- 未绑定 -->
				<div class="unbind" v-if="!bindFlag">
					<div>
						<span class="left" v-if="loaded">{{
							$t('personalCenter.cellPhoneNumber', '手机号')
						}}</span>
						<span class="right_modify" v-if="loaded" @click="bindPhoneN">{{
							$t('personalCenter.bindMobileNumber', '绑定手机号')
						}}</span>
						<span class="right_tips" v-if="loaded">
							{{
								$t(
									'personalCenter.bind',
									'绑定手机号注册统一用户中心账号，您将享受便捷登录，更可免登进入用户论坛与云市场'
								)
							}}</span
						>
					</div>

					<!-- <div v-if="!!threeImgSrc">
						<span class="left">{{$t('personalCenter.ThirdPartyAccount','第三方账号')}}</span>
						<span class="right">
							<img :src="threeImgSrc" width="18" />
							<span style="margin-left: 10px">{{ threeName }}</span>
							<span class="bind">{{$t('personalCenter.bound','已绑定')}}</span>
						</span>
					</div>  -->
				</div>
			</div>
		</div>
		<Mask v-if="showShade">
			<template #box>
				<!-- 绑定手机号 -->
				<bind-phone
					v-if="!bindFlag"
					:title="$t('personalCenter.bindMobileNumber', '绑定手机号')"
					@close="close"
					@bind="bind"
				></bind-phone>
				<div v-else>
					<!-- 设置密码 -->
					<set-login-pwd
						v-if="!pwdFlag && !clickCPhone"
						:title="$t('personalCenter.setPassword', '设置密码')"
						@close="close"
						@setPwdFlag="setPwdFlag"
						@visible="onVisible"
					></set-login-pwd>
					<!-- 修改密码 -->
					<!-- <modify-login-pwd
						v-show="pwdFlag && !clickCPhone"
						title="修改平台登录密码"
						@showTip="showTip"
						@close="close"
						@Refresh="Refresh"
					></modify-login-pwd> -->
					<modify-login-pwd
						:title="$t('personalCenter.setLoginPwd', '修改平台登录密码')"
						v-show="pwdFlag && !clickCPhone"
						@close="close"
						@changePwdFlag="changePwdFlag"
					></modify-login-pwd>
					<!-- 换绑手机号 -->
					<change-bind
						:title="$t('personalCenter.changeCellPhone', '换绑手机号')"
						v-show="clickCPhone"
						@showTip="showTip"
						@close="close"
						@changeBindFlag="changeBindFlag"
					></change-bind>
				</div>
			</template>
		</Mask>
	</div>
</template>
<script lang="ts">
import { useStore } from 'vuex'
import Mask from '../mask/index.vue'
import { defineComponent, ref, onMounted, reactive, onBeforeMount } from 'vue'
import { apiInit } from '@/services'
import { TrophyOutlined } from '@ant-design/icons-vue'
import bindPhone from '../messageBox/bindPhone2.vue'
import setLoginPwd from '../messageBox/setLoginPwd2.vue'
import changeBind from '../messageBox/changeBind2.vue'
import modifyLoginPwd from '../messageBox/modifyLoginPwd2.vue'
import { i18n } from '@/locales'
const { $t } = i18n

export default defineComponent({
	components: {
		bindPhone,
		setLoginPwd,
		changeBind,
		modifyLoginPwd,
		Mask,
	},
	setup(props, ctx) {
		const store = useStore()
		const bindFlag = ref(false)
		const showShade = ref(false)
		const pwdFlag = ref(false)
		const clickCPhone = ref(false)
		const requestDisabled = ref(false)
		const restTime = ref('59s')
		const phoneNum = ref('')
		const setPwdVisible = ref(true)
		const api = apiInit()
		const loaded = ref(false) //解决数据未加载完成时，显示默认页面，应该显示空白
		///^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/
		const userInfo: any = reactive({
			user_id: '',
			password: '',
			phone: '',
		})
		const threeImgSrc = ref('')
		const threeName = ref('')
		const threeInfo = {
			DD_THIRD_APP: {
				imgSrc: '/images/dingtalk.png',
				name: '钉钉',
			},
		}
		const union_id = ref('')
		// 展示提示弹窗
		const showTip = (tipOptions: any) => {
			ctx.emit('showTip', tipOptions)
		}
		const bind = (option: boolean) => {
			bindFlag.value = option
			close(false)
			getUserInfo()
		}
		const setPwdFlag = (option: boolean) => {
			pwdFlag.value = option
			close(false)
			getUserInfo()
		}
		const changePwdFlag = () => {
			close(false)
			getUserInfo()
		}
		// 修改密码
		const changePwd = () => {
			showShade.value = true
		}
		// 换绑手机号
		const changePhoneN = () => {
			clickCPhone.value = true
			showShade.value = true
		}
		// 绑定手机号
		const bindPhoneN = () => {
			showShade.value = true
		}

		// 设置百特搭登录密码
		const setPwd = () => {
			showShade.value = true
		}
		// 关闭弹框
		const close = (val: boolean) => {
			clickCPhone.value = false
			showShade.value = val
		}

		const onVisible = (val: boolean) => {
			setPwdVisible.value = val
		}
		// 刷新页面
		const changeBindFlag = () => {
			close(false)
			getUserInfo()
		}
		onMounted(async () => {
			let type = store.state.userInfo.msg_relation_type
			threeImgSrc.value = threeInfo[type]?.imgSrc
			threeName.value = threeInfo[type]?.name
			union_id.value = store.state.userInfo.union_id
			// 发送请求，获取用户基础信息
			// const base = await api.userCenterAuto.BaseUserPrivateApiGET({})
			// 获取当前登陆人在用户中心的信息
			if (store.state.tenant.tenant_auth.baiteda_security_account) {
				getUserInfo()
			}
		})

		const getUserInfo = () => {
			// const getCenterUser =
			// 	await api.default.GetCenterUserUserCenterPrivateV1GET({})
			const getCenterUser = store.state?.centerUser?.user_base_info
			userInfo.user_id = getCenterUser?.user_id
			userInfo.phone = getCenterUser?.phone
			// if (getCenterUser.code == '000000') {
			loaded.value = true
			// }
			if (getCenterUser?.phone) {
				bindFlag.value = true
			}
			if (getCenterUser?.is_set_pwd) {
				pwdFlag.value = true
			}
			// store.commit('setCenterUser', getCenterUser.data ?? {})
		}

		return {
			userInfo,
			bindFlag,
			changePwd,
			changePhoneN,
			bindPhoneN,
			showShade,
			pwdFlag,
			setPwd,
			setPwdFlag,
			changePwdFlag,
			close,
			changeBindFlag,
			restTime,
			requestDisabled,
			clickCPhone,
			phoneNum,
			showTip,
			bind,
			threeInfo,
			threeImgSrc,
			threeName,
			union_id,
			setPwdVisible,
			onVisible,
			loaded,
			// observeTime
		}
	},
})
</script>
<style lang="less">
.nameTooltipClass {
	z-index: 1;
	.ant-tooltip-inner {
		background-color: var(--bl-brand-c);
	}
	.ant-tooltip-arrow-content {
		// 这里是小三角形
		background-color: var(--bl-brand-c);
	}
}
</style>
<style lang="less" scoped>
.security {
	margin-top: 16px;
	width: 100%;
	height: 287px;
	background-color: #fff;
	border-radius: 6px;
	.security_top {
		display: flex;
		align-items: center;
		padding-left: 29px;
		height: 61px;
		line-height: 61px;
		border-bottom: 1px solid #e8eaed;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 500;
		font-size: 17px;
		color: #1f2329;
		.bind {
			display: inline-block;
			position: relative;
			margin-left: 8px;
			// width: 44px;
			padding: 0 4px;
			height: 18px;
			line-height: 18px;
			text-align: center;
			border-radius: 2px;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: normal;
			font-size: 12px;
			color: var(--bl-brand-c);
			&:before {
				content: '';
				position: absolute;
				z-index: 0;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: var(--bl-brand-c);
				opacity: 0.2;
			}
		}
		.Unbound {
			display: inline-block;
			margin-left: 8px;
			// width: 44px;
			padding: 0 4px;
			height: 18px;
			line-height: 18px;
			text-align: center;
			background: #fff6e5;
			border-radius: 2px;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: normal;
			font-size: 12px;
			color: #ff9801;
		}
	}
	.security_main {
		.security_main_content {
			display: flex;
			justify-content: space-between;
			width: 100%;
			.border {
				border-right: 1px solid #e8eaed;
			}
			.security_main_left {
				margin: 32px 0px 32px 30px;
				width: 50%;
				height: 180px;
				// background-color: #ccc;
				// border-right: 1px solid #e8eaed;
				.low-code {
					margin-left: 8px;
					color: var(--bl-brand-c);
				}
				div {
					margin-bottom: 24px;
					height: 32px;
					line-height: 32px;
					.left {
						display: inline-block;
						width: 120px;
						font-family: PingFang SC;
						font-style: normal;
						font-weight: 500;
						font-size: 14px;
						color: #8f959e;
					}
					.right {
						font-family: PingFang SC;
						font-style: normal;
						font-weight: normal;
						font-size: 14px;
					}
					.right_modify {
						color: var(--bl-brand-c);
						cursor: pointer;
					}

					.icon_edit {
						display: inline-block;
						margin-left: 10.05px;
						width: 19.34px;
						height: 23.57px;
						vertical-align: middle;
						background-image: url(/public/icon/edit.svg);
					}
					.icon_install {
						display: inline-block;
						margin-left: 10.05px;
						width: 19.34px;
						height: 19.57px;
						vertical-align: middle;
						background-image: url(/public/icon/install.svg);
					}
					.right_change {
						color: var(--bl-brand-c);
						margin-left: 30px;
						cursor: pointer;
					}
					.right_tips {
						margin-left: 20px;
						height: 37px;
						padding: 10px 10px 10px 16px;
						// border: 1px solid #1F2329;
						font-family: PingFang SC;
						font-style: normal;
						font-weight: 500;
						font-size: 14px;
						color: #646a73;
						background: #ebf1ff;
						border-radius: 8px;
					}
				}
			}
			.security_main_right {
				margin: 32px 0px 32px 30px;
				width: 50%;
				height: 180px;
				div {
					margin-bottom: 24px;
					height: 32px;
					line-height: 32px;
					.left {
						display: inline-block;
						width: 120px;
						font-family: PingFang SC;
						font-style: normal;
						font-weight: 500;
						font-size: 14px;
						color: #8f959e;
					}
					.right {
						font-family: PingFang SC;
						font-style: normal;
						font-weight: normal;
						font-size: 14px;
					}
					.bind {
						// display: inline-block;
						margin-left: 8px;
						// width: 44px;
						padding: 0 4px;
						height: 18px;
						line-height: 18px;
						text-align: center;
						background: #ebf1ff;
						border-radius: 2px;
						font-family: PingFang SC;
						font-style: normal;
						font-weight: normal;
						font-size: 12px;
						color: #4c78fc;
					}
				}
			}
		}
		.unbind {
			div {
				margin: 35px 30px;
				height: 32px;
				line-height: 32px;
				.bind {
					display: inline-block;
					margin-left: 8px;
					width: 44px;
					height: 18px;
					line-height: 18px;
					text-align: center;
					background: #ebf1ff;
					border-radius: 2px;
					font-family: PingFang SC;
					font-style: normal;
					font-weight: normal;
					font-size: 12px;
					color: #4c78fc;
				}
				.left {
					display: inline-block;
					width: 120px;
					font-family: PingFang SC;
					font-style: normal;
					font-weight: 500;
					font-size: 14px;
					color: #8f959e;
				}
				.right {
					font-family: PingFang SC;
					font-style: normal;
					font-weight: normal;
					font-size: 14px;
				}
				.right_modify {
					color: var(--bl-brand-c);
					cursor: pointer;
				}

				.icon_edit {
					display: inline-block;
					margin-left: 10.05px;
					width: 19.34px;
					height: 23.57px;
					vertical-align: middle;
					background-image: url(/public/icon/edit.svg);
				}
				.icon_install {
					display: inline-block;
					margin-left: 10.05px;
					width: 19.34px;
					height: 19.57px;
					vertical-align: middle;
					background-image: url(/public/icon/install.svg);
				}
				.right_change {
					color: var(--bl-brand-c);
					margin-left: 30px;
					cursor: pointer;
				}
				.right_tips {
					margin-left: 20px;
					height: 37px;
					padding: 10px 10px 10px 16px;
					// border: 1px solid #1F2329;
					font-family: PingFang SC;
					font-style: normal;
					font-weight: 500;
					font-size: 14px;
					color: #646a73;
					background: #ebf1ff;
					border-radius: 8px;
				}
			}
		}
	}
	.password-tips {
		.p-tooltip {
			display: inline-block;
			.low-code {
				width: 15px;
				height: 15px;
				color: var(--bl-brand-c);
			}
		}
	}
}
.phone {
	// margin-left: 23px;
	// margin-top: 25px;
	margin: 25px 0 7px 25px;
	font-family: PingFang SC;
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
	// line-height: 20px;
}
.input {
	display: flex;
	justify-content: space-between;
	width: 300px;
	height: 40px;
	margin-left: 23px;
	background: #ffffff;
	/* 辅色/N300-组件边框 */
	outline: none;
	border: 1px solid #dee0e3;
	box-sizing: border-box;
	border-radius: 4px;
	padding-left: 10px;
}
.input_pwd {
	display: flex;
	justify-content: space-between;
	width: 380px;
	height: 40px;
	margin-left: 23px;
	background: #ffffff;
	/* 辅色/N300-组件边框 */
	outline: none;
	border: 1px solid #dee0e3;
	box-sizing: border-box;
	border-radius: 4px;
	padding-left: 10px;
	.pwd {
		width: 324px;
		border: none;
		outline: none;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		font-size: 14px;
		// color: #bbbfc4;
	}
	.icon_show {
		display: inline-block;
		margin-top: 17px;
		margin-right: 17px;
		width: 14px;
		height: 6px;
		vertical-align: middle;
		background-image: url(/public/icon/Vector.svg);
	}
}
.input_phone {
	border: none;
	outline: none;
}
.code {
	padding-right: 20px;
	// line-height: 40px;
	background-color: #ffffff;
	font-family: PingFang SC;
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	color: #4c78fc;
	cursor: pointer;
	outline: none;
	border: none;
}
// .shade {
// 	display: flex;
// 	justify-content: center;
// 	align-items: center;
// 	position: fixed;
// 	top: 0;
// 	left: 0;
// 	width: 100vw;
// 	height: 100vh;
// 	background: rgba(94, 108, 157, 0.5);
// 	z-index: 999;
// }
</style>
